﻿@{ Layout = "~/Views/Shared/_FormGray.cshtml"; }
@using SHRIS.MIS.Common.Util
@inject Microsoft.AspNetCore.Hosting.IWebHostEnvironment HostingEnvironment
@section header{
    @BundlerHelper.Render(HostingEnvironment.ContentRootPath, Url.Content("~/lib/report/echarts/echarts.min.js"))
}

<div class="wrapper wrapper-content">
    <div class="row">
        <div id="searchDiv" class="col-sm-12 search-collapse">
            <div class="select-list">
                <ul>
                    <li>
                        设备编码：<input id="deviceCode" col="DeviceCode" type="text" />
                    </li>
                    <li class="select-time">
                        <label>创建时间： </label>
                        <input id="startTime" col="StartTime" type="text" class="time-input" placeholder="开始时间" />
                        <span>-</span>
                        <input id="endTime" col="EndTime" type="text" class="time-input" placeholder="结束时间" />
                    </li>
                    <li>
                        <a id="btnSearch" class="btn btn-primary btn-sm" onclick="searchGrid()"><i class="fa fa-search"></i>&nbsp;搜索</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>折线图</h5>
                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>

                        <a class="close-link">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                </div>
                <div class="ibox-content">
                    <div class="echarts" id="echarts-line-chart"></div>
                </div>
            </div>
        </div>

    </div>
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>柱状图</h5>
                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>

                        <a class="close-link">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                </div>
                <div class="ibox-content">

                    <div class="echarts" id="echarts-bar-chart"></div>
                </div>
            </div>
        </div>
    </div>

</div>

<script type="text/javascript">
    $(function () {
        laydate.render({ elem: '#startTime', format: 'yyyy-MM-dd' });
        laydate.render({ elem: '#endTime', format: 'yyyy-MM-dd' });

        //initlineChart();
        //initbarChart();

    });

    function initlineChart(entity) {
        var lineChart = echarts.init(document.getElementById("echarts-line-chart"));
        var lineoption = {
            title: {
                text: entity.Title
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['气温']
            },
            grid: {
                x: 40,
                x2: 40,
                y2: 24
            },
            calculable: true,
            xAxis: [
                {
                    type: 'category',
                    boundaryGap: false,
                    data: entity.xAxisData
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    axisLabel: {
                        formatter: '{value} °C'
                    }
                }
            ],
            series: [
                {
                    name: '温度',
                    type: 'line',
                    data: entity.seriesData,
                    markPoint: {
                        data: [
                            { type: 'max', name: '最大值' },
                            { type: 'min', name: '最小值' }
                        ]
                    },
                    markLine: {
                        data: [
                            { type: 'average', name: '平均值' }
                        ]
                    }
                }
            ]
        };
        lineChart.setOption(lineoption);
        $(window).resize(lineChart.resize);
    }
    function initbarChart(entity) {
          var barChart = echarts.init(document.getElementById("echarts-bar-chart"));
        var baroption = {
            title: {
                text: entity.Title
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['工艺参数']
            },
            grid: {
                x: 40,
                x2: 40,
                y2: 24
            },
            calculable: true,
            xAxis: [
                {
                    type: 'category',
                    data: entity.xAxisData
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    axisLabel: {
                        formatter: '{value} °C'
                    }
                }
            ],
            series: [
                {
                    name: '工艺参数',
                    type: 'bar',
                    data: entity.seriesData,
                    markPoint: {
                        data: [
                            { type: 'max', name: '最大值' },
                            { type: 'min', name: '最小值' }
                        ]
                    },
                    markLine: {
                        data: [
                            { type: 'average', name: '平均值' }
                        ]
                    }
                }
            ]
        };
        barChart.setOption(baroption);

        window.onresize = barChart.resize;
    }

    function searchGrid() {
        //initlineChart();
        //initbarChart();
             ys.ajax({
                 url: '@Url.Content("~/ReportManage/Report/GetDeviceTemp")',
                 type: "get",
                 data: {
                     "DeviceCode": $("#deviceCode").val(), "StartTime": $("#startTime").val(), "EndTime": $("#endTime").val()},
                success: function (obj) {
                    if (obj.Tag == 1) {
                        var result = obj.Data;
                        initlineChart(result.LineReport);
                        initbarChart(result.BarReport);
                    }
                    else {
                        ys.msgError(obj.Message);
                    }
                }
            });
    }

</script>
